<template>
    <div>

        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="开始吐槽（最多允许120字....）" v-model="say" ref="getFocus"></textarea>
        <mt-button type="primary" size="large" @click="msgPost">发表评论</mt-button>

        <div class="cmt-list" v-for="(v, i) in msg" :key="v.add_time">
            <div class="cmt-title">
                <span>第{{ i + 1 }}楼&nbsp;&nbsp;</span>
                <span>用户:{{ v.user_name }}&nbsp;&nbsp;</span>
                <span>发表时间:{{ v.add_time | dateFormat}}</span>
            </div>
            <p class="cmt-body">{{ v.content === 'undefined' ? '此用户无数据' : v.content }}</p>
            <!-- 这里后台数据有字符串 "undefined" ,也有空数据，需要在 js 里写判断 return 个值出来用，这里三元表达式无法判断 -->
        </div>

        <mt-button type="danger" size="large" plain @click="getMore">加载更多...</mt-button>

    </div>
</template>

<script>
    //import { Toast } from 'mint-ui';  // 疑问，子组件中不能用全局导入的插件么？？？？
    export default {
        data () {
            return {
               pageIndex: 1,
               msg:[],
               say:'',
            }
        },
        props: ['infoId'],
        created () {
            this.getComment();
        },
        methods: {
            getComment () {
                this.$http.get('api/getcomments/' + this.infoId + '?pageindex=' + this.pageIndex )
                .then(res => {
                    if ( res.body.status === 0 ) {
                        this.msg = this.msg.concat( res.body.message ); // 千万不要想着 push ，想想为啥！！
                    } else {
                        this.$toast('获取评论失败！')
                    }
                })
            },
            getMore () {
                // 理清获取更多评论的原理
                this.pageIndex += 1;  // ++ 都行
                this.getComment();
            },
            msgPost () {
                if ( !this.say.trim() ) {
                    this.say = '';
                    this.$refs.getFocus.focus();// ref---$refs 很强大，不只是可以操作dom
                    return this.$toast('内容不能为空');
                } else {
                    this.$http.post( 'api/postcomment/' + this.infoId, { content: this.say.trim() } )
                    .then( res => {
                        if (res.body.status === 0) {
                            var temp = {
                                user_name: '匿名用户',
                                add_time: Date.now(),
                                content: this.say
                            }
                            this.msg.unshift( temp );
                            this.say = '';
                            // this.getComment();// 看下调用下是什么效果--->因为用的是 concat 数组拼接，所以.........
                        }
                    })
                    // 评论数据发出去之后，这个数据如何保存到本页面的数据里面去渲染，是业务逻辑的重点，需要重新刷发送请求刷新列表么？
                    // this.msg.unshift( this.say ); 这样写是非常低级的错误，直接加进去是数据格式是什么，能解析么，需要在客户端写一个对象数据，才能解析
                }
            },
            /* dierctives: {
                focus: {
                    inserted ( el ) {
                        el.focus();
                    }
                },
            }, */
        },
    }
</script>

<style lang="scss" scoped>
    
    div {
        padding-top: 10px;
        h3 {
            margin: 0;
            font-size: 16px;
        }
        textarea {
            font-size: 14px;
            height: 85px;
            vertical-align: top;
            margin-bottom: 5px;
        }
        .cmt-list {
            margin-top: 5px;
            .cmt-title {
                padding-left: 4px;
                background-color: #ccc;
                font-size: 12px;
                line-height: 25px;
            }
            .cmt-body {
                margin: 5px 0;
                padding-left: 20px; 
                font-size: 14px;
                color: #000;
            }
        }
    }

</style>


